<script setup>

import {useMeta2dStore} from "../../utils/meta2dStore";
import {onMounted, reactive, ref} from "vue";


const store = useMeta2dStore()
const devName = ref({
    id:1,
    name: "",
    ip: "",
    os_version:"",
    os:"",
    asset_type:"",
    web_infos:[{
        ip:"",
        uri:"",
        code:200,
        title:"",
        protocol:"",
        port:22,
        value:1
    }],
    firewall_policies:[{
        srcIp:"",
        desIp:"",
        srcPort:22,
        desPort:22,
        enable:true,
        policy:"",
        protocol:""
    }]
})
const meta2d = ref({})
const disabled = ref(true)
const ruleFormRef = ref();
const rules = reactive({})

onMounted(() => {
    meta2d.value = store.meta2d
    devName.value = store.active[0].devName
})

store.$subscribe((mutation, state) => {
    meta2d.value = state.meta2d
    devName.value = state.active[0].devName
})

const edit = () => {
    disabled.value = false;
}

const submit = async (formEl) => {
    if (!formEl)return;
    await formEl.validate((valid,fields)=>{
        if (valid){
            store.active[0].devName = devName.value;
            disabled.value = true;
        }else {
            console.log("error",fields)
        }
    })
}
</script>

<template>
    <el-descriptions title="资产信息" :column="1">
        <template #extra>
            <el-button v-if="disabled" type="primary" @click="edit()">编辑</el-button>
            <el-button v-else type="primary" @click="submit(ruleFormRef)">保存</el-button>
        </template>
        <el-descriptions-item>
            <el-form ref="ruleFormRef" label-width="30%" label-position="left" :model="devName" :rules="rules">
                <el-form-item label="资产名称" prop="name">
                    <el-input v-model="devName.name" :disabled="disabled" class="input_box" size="small"/>
                </el-form-item>
                <el-form-item label="IP地址" prop="ip">
                    <el-input v-model="devName.ip" :disabled="disabled" class="input_box" size="small"/>
                </el-form-item>
                <el-form-item label="操作系统" prop="os">
                    <el-input v-model="devName.os" :disabled="disabled" class="input_box" size="small"/>
                </el-form-item>
                <el-form-item label="系统版本" prop="os_version">
                    <el-input v-model="devName.os_version" :disabled="disabled" class="input_box" size="small"/>
                </el-form-item>
                <el-form-item label="资产类型" prop="asset_type">
                    <el-input v-model="devName.asset_type" :disabled="disabled" class="input_box" size="small"/>
                </el-form-item>
            </el-form>
        </el-descriptions-item>
    </el-descriptions>
    <el-divider/>
    <el-descriptions title="其他信息" :column="1" :border="true">
        <template #extra>
            <el-button type="primary">查看详情</el-button>
        </template>
        <el-descriptions-item label="漏洞等级" align="center"><el-tag type="success">安全</el-tag></el-descriptions-item>
        <el-descriptions-item label="软件数量" align="center">10</el-descriptions-item>
    </el-descriptions>
</template>

<style scoped>
.input_box{
    width: 80%;
    margin-left: 20%;
}
</style>